<template>
    <div v-if="wzsj?.json_content" style="box-sizing: border-box;padding: 10px;">
        <div class="lzmlbt">
            <van-nav-bar title="连载" left-arrow @click-left="onClickLeft" />
        </div>
        <h3>{{ wzsj?.title }}</h3>
        <div class="xwz">{{ wzsj?.json_content?.simple_author[0] }}</div>
        <!-- 渲染 -->
        <div v-html="wzsj?.json_content?.content"></div>

        <!-- 底部编辑 -->
        <div class="bjxwz">{{ wzsj?.json_content?.editor }}</div>
        <div class="bjxwz">{{ wzsj?.json_content?.copyright }}</div>

        <!-- 作者 -->
        <div class="zzjj">作者</div>

        <div class="zztx">
            <img :src="wzsj?.json_content?.author?.authors[0]?.avatar" alt="">
            <div>
                <div>{{ wzsj?.json_content?.author?.authors[0]?.name }}</div>
                <div>{{ wzsj?.json_content?.author?.authors[0]?.brief }}</div>
            </div>
            <div class="ddgz">关注</div>
        </div>

        <div class="zzjj">评论列表</div>

        <div v-for="(item, index) in wzplsj?.data" :key="index">
            <van-row justify="space-between" style="margin: 10px 0;">
                <van-col span="12" class="plqzb">
                    <img :src="item?.user?.web_url" alt="">
                    <div class="plyhm">{{ item?.user?.user_name }}</div>
                </van-col>
                <van-col span="12" class="plqyb">{{ item?.input_date }}</van-col>
            </van-row>
            <div class="plqpl">{{ item?.content }}</div>

            <van-row justify="end">
                <van-col span="24" class="plqyxtb">
                    <svg t="1676653158760" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2789" width="16" height="16">
                        <path
                            d="M872.4266666666666 61.440000000000055H151.57333333333338c-49.6 0-89.70666666666666 40.53333333333333-89.70666666666666 90.13333333333333l-0.4266666666666667 810.9866666666666 180.26666666666665-180.26666666666665h630.7199999999999c49.6 0 90.13333333333333-40.53333333333333 90.13333333333333-90.13333333333333V151.57333333333338c0-49.6-40.53333333333333-90.13333333333333-90.13333333333333-90.13333333333333zM376.85333333333335 466.9866666666667h-90.13333333333333v-90.13333333333333h90.13333333333333v90.13333333333333z m180.16 0h-90.13333333333333v-90.13333333333333h90.13333333333333v90.13333333333333z m180.26666666666665 0h-90.13333333333333v-90.13333333333333h90.13333333333333v90.13333333333333z"
                            p-id="2790" fill="#bfbfbf"></path>
                    </svg>
                    <div style="display: flex;justify-content: center;margin-left: 10px;">
                        <!-- 点亮红心 -->
                        <svg v-if="item.reviewed == 0" @click="item.reviewed = 1" t="1676653188270" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3939" width="16"
                            height="16">
                            <path
                                d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                p-id="3940" fill="#bfbfbf"></path>
                        </svg>
                        <svg v-if="item.reviewed == 1" @click="item.reviewed = 0" t="1676653970616" class="icon"
                            viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4431" width="16"
                            height="16">
                            <path
                                d="M857.28 344.992h-264.832c12.576-44.256 18.944-83.584 18.944-118.208 0-78.56-71.808-153.792-140.544-143.808-60.608 8.8-89.536 59.904-89.536 125.536v59.296c0 76.064-58.208 140.928-132.224 148.064l-117.728-0.192A67.36 67.36 0 0 0 64 483.04V872c0 37.216 30.144 67.36 67.36 67.36h652.192a102.72 102.72 0 0 0 100.928-83.584l73.728-388.96a102.72 102.72 0 0 0-100.928-121.824zM128 872V483.04c0-1.856 1.504-3.36 3.36-3.36H208v395.68H131.36A3.36 3.36 0 0 1 128 872z m767.328-417.088l-73.728 388.96a38.72 38.72 0 0 1-38.048 31.488H272V476.864a213.312 213.312 0 0 0 173.312-209.088V208.512c0-37.568 12.064-58.912 34.72-62.176 27.04-3.936 67.36 38.336 67.36 80.48 0 37.312-9.504 84-28.864 139.712a32 32 0 0 0 30.24 42.496h308.512a38.72 38.72 0 0 1 38.048 45.888z"
                                p-id="4432" fill="#fe6c0a"></path>
                        </svg>
                        <div style="margin-left: 5px;">{{ item?.reviewed == 0 ? item?.praisenum : (item?.praisenum - 0) + 1
                        }}</div>
                    </div>
                </van-col>
            </van-row>
            <van-divider />
        </div>

        <!-- 写评论 -->
        <van-row justify="space-between" class="xygpl">
            <van-col span="12" style="display: flex;align-items: center;box-sizing: border-box;padding-left: 10px;">
                <div
                    style="width: 110px;height: 35px;border: 1px solid #c9c9c9;border-radius: 5px;text-align: center;line-height: 35px;">
                    写一个评论..</div>
            </van-col>
            <van-col span="12" class="xygplyb">
                <!-- 爱心 -->
                <svg v-if="reviewed == 0" @click="reviewed = 1" t="1676608723950" class="icon" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11545" width="16" height="16">
                    <path
                        d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                        p-id="11546" fill="#bfbfbf"></path>
                </svg>
                <!-- 爱心亮 -->
                <svg v-if="reviewed == 1" @click="reviewed = 0" t="1676655682572" class="icon" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5687" width="16" height="16">
                    <path
                        d="M533.504 268.288q33.792-41.984 71.68-75.776 32.768-27.648 74.24-50.176t86.528-19.456q63.488 5.12 105.984 30.208t67.584 63.488 34.304 87.04 6.144 99.84-17.92 97.792-36.864 87.04-48.64 74.752-53.248 61.952q-40.96 41.984-85.504 78.336t-84.992 62.464-73.728 41.472-51.712 15.36q-20.48 1.024-52.224-14.336t-69.632-41.472-79.872-61.952-82.944-75.776q-26.624-25.6-57.344-59.392t-57.856-74.24-46.592-87.552-21.504-100.352 11.264-99.84 39.936-83.456 65.536-61.952 88.064-35.328q24.576-5.12 49.152-1.536t48.128 12.288 45.056 22.016 40.96 27.648q45.056 33.792 86.016 80.896z"
                        p-id="5688" fill="#d81e06"></path>
                </svg>
                <div style="margin-left: 5px;margin-right: 10px;">{{ reviewed == 0 ? 100 : 100 + 1 }}</div>

                <svg t="1676704434645" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="3637" width="16" height="16">
                    <path
                        d="M185.2 888.7c-16.6 0-30-13.4-30-30v-580c0-49.6 40.4-90 90-90h540c49.6 0 90 40.4 90 90v410c0 49.6-40.4 90-90 90h-429c-16.6 0-30-13.4-30-30s13.4-30 30-30h429c16.5 0 30-13.5 30-30v-410c0-16.5-13.5-30-30-30h-540c-16.5 0-30 13.5-30 30v580c0 16.5-13.5 30-30 30z m490.1-430.5H347c-16.6 0-30-13.4-30-30s13.4-30 30-30h328.3c16.6 0 30 13.4 30 30s-13.4 30-30 30zM494 598.2H345.7c-16.6 0-30-13.4-30-30s13.4-30 30-30H494c16.6 0 30 13.4 30 30s-13.4 30-30 30zM194.2 883.7c-9.8 0-19.3-4.8-25.1-13.5-9.1-13.9-5.2-32.5 8.6-41.5l160-105c13.9-9.1 32.5-5.2 41.5 8.6 9.1 13.9 5.2 32.5-8.6 41.5l-160 105c-5 3.3-10.8 4.9-16.4 4.9z"
                        fill="#bfbfbf" p-id="3638"></path>
                </svg>
                <div style="margin-left: 5px;margin-right: 10px;">20</div>

                <svg t="1676704494016" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                    p-id="4823" width="16" height="16">
                    <path
                        d="M865.922728 583.211878c-16.276708 0-29.580712 13.246699-29.667693 29.727045l0 215.125569c0 17.992793-14.58723 32.637328-32.520671 32.637328L181.762717 860.70182c-17.935488 0-32.520671-14.645558-32.520671-32.637328L149.242046 292.155966c0-17.992793 14.586207-32.637328 32.520671-32.637328l291.230897 0c16.304338-0.029676 29.580712-13.363356 29.580712-29.724998 0-16.392342-13.276375-29.727045-29.610388-29.727045l-295.336402 0c-48.358381 0-87.721901 39.450501-87.721901 87.925538l0 544.205493c0 48.475038 39.36352 87.925538 87.721901 87.925538l630.239961 0c48.358381 0 87.720877-39.450501 87.720877-87.925538L895.588375 612.762915C895.501394 596.458577 882.19739 583.211878 865.922728 583.211878z"
                        fill="#bfbfbf" p-id="4824"></path>
                    <path
                        d="M930.818761 338.183256l0-0.318248L727.07645 133.511783l-6.435573-6.259564-0.814552 0.844228c-4.511757-2.532683-9.606799-3.873214-14.876826-3.873214-16.974603 0-30.774911 13.829983-30.774911 30.832216 0 5.298679 1.338485 10.393721 3.873214 14.907525l-0.903579 0.931209 141.845589 142.224212-145.573493 0.057305C436.396091 342.726735 378.197598 489.375723 361.049033 717.050096c0 17.004279 13.800307 30.832216 30.772864 30.832216 13.858636 0 25.620517-9.229199 29.464055-21.893636l1.397836-8.181333c18.022469-215.329207 60.470233-321.567833 251.839749-342.937536l144.466276 0L683.433464 510.804778l-5.502317 7.744381c-1.951445 4.104481-2.969635 9.112542-2.969635 13.654998 0 17.002232 13.799284 30.832216 30.772864 30.832216 4.832052 0 10.160407-1.164522 14.439874-3.37691L929.954067 350.740246c1.860371-1.305739 4.140297-4.52506 4.140297-6.970762C934.093341 341.323782 932.679132 339.488994 930.818761 338.183256z"
                        fill="#bfbfbf" p-id="4825"></path>
                </svg>

            </van-col>
        </van-row>
    </div>
</template>

<script setup>
import { onMounted, reactive, ref } from '@vue/runtime-core'
import { useRouter } from 'vue-router'
import axios from '../plugins/axiosInstance';
let reviewed = ref(0)
const id = ref('')
const router = useRouter()
const wzsj = ref({})
const wzplsj = ref({})
const title = ref('')
const onClickLeft = () => history.back();
onMounted(() => {
    
    // id.value = JSON.parse(localStorage.getItem('lzwzxxId'))
    id.value = router.currentRoute.value.query.data
    axios({
        url: `https://apis.netstart.cn/one/serialcontent/htmlcontent/${id?.value}`,
        method: 'get'
    }).then((res) => {
        wzsj.value = res?.data?.data
        console.log(wzsj);
    }).catch(()=>{})
    axios({
        url: `https://apis.netstart.cn/one/comment/praiseandtime/serial/${id?.value}/0`,
        method: 'get'
    }).then((res) => {
        wzplsj.value = res?.data?.data
        console.log(wzplsj);
    }).catch(()=>{})
})

</script>

<style lang="less" scoped>
.xygplyb {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    box-sizing: border-box;
    padding-right: 20px;
}

.xygpl {
    width: 100%;
    height: 50px;
    background-color: #fbfbfb;
    position: fixed;
    bottom: 0;
}
.plqzb {
    display: flex;
    align-items: center;

    img {
        width: 30px;
        height: 30px;
        border-radius: 20px;
        margin-left: 10px;
    }

    .plyhm {
        box-sizing: border-box;
        padding-left: 10px;
        font-size: 14px;
        color: #a8a8a8;
    }
}

.plqyb {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    color: #959595;
    font-size: 14px;
}

.plqyxtb {
    display: flex;
    justify-content: flex-end;
    box-sizing: border-box;
    padding-right: 10px;
    align-items: center;
}

.plqpl {
    font-size: 14px;
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
}

.zzjj {
    font-size: 14px;
    border-bottom: 5px solid black;
    display: flex;
    align-items: flex-start;
    width: 60px;
    height: 30px;
}

.zztx {
    margin: 10px;
    display: flex;

    img {
        width: 40px;
        height: 40px;
        border-radius: 100%;
    }

    div {
        height: 40px;
        width: 100%;
        box-sizing: border-box;
        padding-left: 10px;
        position: relative;

        div {
            width: 100%;
            height: 50%;
        }

        div:nth-child(2) {
            font-size: 12px;
            color: #828282;
        }
    }

    .ddgz {
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        width: 80px;
        height: 30px;
        border: 1px solid #b8b8b8;
        border-radius: 20px;
        line-height: 30px;
        padding: 0;
    }
}

.xwz {
    font-size: 12px;
    margin: 10px 0;
    color: #484848;
}

.bjxwz {
    font-size: 12px;
    padding: 5px 0;
    color: #8a8a8a;
}</style>